<template>
	<view class="order">
		<!-- tab 栏 -->
		<view class="tabBox">
			<view class="card" :style="{backgroundImage:'url('+baseUrl+'static/index/allmoney.png'+')'}">
				<view class="card_1">
					<view class="my">佣金可提总额（元）</view>
					<view class="curr" v-if="type == 2">￥{{region_commission||0}}</view>
					<view class="curr" v-if="type != 2">￥{{commission||0}}</view>
					<view class="card_2" @tap.stop="goMoney">
						提现
					</view>
				</view>

			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="list_l">
						<view class="list_l_r">
							<view class="name">订单号：{{item.order_no||'-'}}</view>
							<view class="time">
								{{item.createtime_text||''}}
							</view>
						</view>
					</view>
					<view class="list_r">
						<view class="time">佣金{{item.money||0}}</view>
						<view class="btn">
							{{item.status == 0 ? '待结算':(item.status == 1?'已结算':'已退款')}}
						</view>
					</view>
				</view>
				<view class="line" v-if="item.remark"></view>
				<view class="remark" v-if="item.remark">
					说明: {{item.remark||'-'}}
				</view>
			</view>
		</view>
		<view class="more">{{isText}}</view>
	</view>

	</view>
</template>

<script>
	import config from '@/common/config/config';
	export default {
		data() {
			return {
				baseUrl: config.baseurl,
				page: 1,
				list: [],
				isText: '',
				commission: "",
				last_page: '',
				type: '',
				region_commission: ''
			};
		},
		onLoad(e) {

			if (e) {
				this.type = e.type ? e.type : ''
			}

		},
		onShow() {
			this.init()
			this.loadData()
			this.getList()
		},
		methods: {
			// 初始
			init() {
				this.list = []
				this.page = 1
				this.isText = ''
			},
			// 获取总佣金
			async loadData() {
				await uni.request({
					url: '/wanlshop/user/refresh',
					method: 'POST',
					success: res => {
						this.commission = res.data.userinfo.commission
						this.region_commission = res.data.userinfo.region_commission
					}
				});
			},
			// 佣金明细列表
			async getList() {
				let that = this

				await uni.request({
					url: '/wanlshop/distribution/moneyList',
					data: {
						page: that.page,
						type: that.type
					},
					success: res => {
						that.list = that.list.concat(res.data.data)
						that.last_page = res.data.last_page
						res.data.total == that.list.length ? that.isText = '暂无数据' : that.isText = ''
						console.log(that.list, 'that.list')
					}
				});
			},
			// 点击提货
			pickUpGoods(el) {
				let that = this
				uni.showModal({
					title: "确定是否提货",
					success: function(res) {
						if (res.confirm) {
							that.$api.orderTh({
								order_number: el.order_number,
							}).then(res => {
								console.log(res)
								that.goDetails(el)
							})
						} else {
							console.log('用户点击取消');
						}
					}
				});
			},

			goMoney() {
				uni.navigateTo({
					url: `/pages/withdrawMoney?type=${this.type}`
				})
			},
		},
		onReachBottom() {
			console.log(this.page, 'ddddd', this.last_page)
			let that = this
			if (that.page < that.last_page) {
				this.page += 1
				that.getList()
			}
		}

	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.u-tab-bar {
		display: none !important;
	}

	.more {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		margin: 30rpx auto;
		padding-bottom: 50rpx;
	}

	.order {
		width: 100vw;

		.tabBox {
			width: 100%;
			height: 330rpx;
			padding: 24rpx;
			box-sizing: border-box;
			position: sticky;
			top: 0;
			background: #fff;

			.card {
				width: 100%;
				height: 100%;
				background-size: 100% 100%;
				border-radius: 20rpx;
				margin: 0 auto;
				padding: 30rpx 16rpx 20rpx 16rpx;

				.card_1 {
					color: #fff;
					margin: 20rpx;

					.my {
						font-size: 28rpx;
					}

					.curr {
						font-size: 48rpx;
						font-weight: 600;
						margin-top: 30rpx;
					}

					.card_2 {
						text-align: center;
						margin-left: 430rpx;
						margin-top: 20rpx;
						height: 50rpx;
						line-height: 50rpx;
						background-color: #fff;
						border-radius: 36rpx;
						color: #F3AE53;
						font-size: 26rpx;
					}
				}


			}
		}

		.listBox {
			width: 95%;
			margin: 30rpx auto;
			margin-top: 0;

			.list {
				border: 2rpx solid #d9d9d966;
				box-shadow: 0 0 16rpx rgba(0, 0, 0, .1);
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin: 20rpx auto;

				.top {
					display: flex;
					justify-content: space-between;
				}

				.line {
					height: 2rpx;
					background-color: #ececec85;
					margin: 18rpx 0;
				}

				.remark {
					line-height: 34rpx;
					color: #BABABA;
					font-size: 26rpx;
					margin-left: 6rpx;
				}

				.list_l {
					width: 70%;
					display: flex;

					.list_l_r {
						font-size: 28rpx;
						font-weight: 400;
						margin-left: 10rpx;
						height: 48rpx;
						line-height: 48rpx;

						.name {
							display: flex;
						}

						.time {
							font-size: 26rpx;
							color: #BABABA;
						}
					}
				}

				.list_r {
					width: 40%;
					font-size: 26rpx;
					text-align: right;

					.time {
						height: 50rpx;
						line-height: 50rpx;
						color: #E84010;
					}

					.btn {
						color: #2CB9A4;

						font-size: 28rpx;
					}

				}
			}
		}
	}
</style>